<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 商品列表 </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>
<body>
    <div class="ws-editorder">
        <h2 class="ws-editorder__tit">商品信息</h2>
        <div class="ws-editorder__main">
            <table class="ws-table" border=1>
                <thead>
                    <tr>
                        <th>
                            货号
                        </th>
                        <th>
                            商品名称
                        </th>
                        <th>
                            价格
                        </th>
                        <th>
                            购买数量
                        </th>
                        <th>
                            小计
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody data-role="tbody">
                    <tr>
                        <td>
                            06060215
                        </td>
                        <td>
                            索尼 钮扣锂电池/手表电池3V CR2025
                        </td>
                        <td>
                            <input type="text" name="" value="">
                        </td>
                        <td>
                            <input type="text" name="" value="">
                        </td>
                        <td>
                            120.000
                        </td>
                        <td>
                            <span class="ico-del"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="goods-info">
                <span class="goods-info__txt">输入商品货号：</span>
                <input type="text" name="" value="" id="addGoods_input">
                <button id="addGoods" type="button" class="button">添加</button>
            </div>
        </div>
        <h2 class="ws-editorder__tit">订单信息</h2>
        <div class="ws-editorder__main">
            <div class="orderInfo">
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">订单号：</span>
                    <span>170215014781185</span>
                </div>
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">商品总金额：</span>
                    <input type="text" readonly name="" value="">
                    <span>是否要保价</span>
                    <input type="checkbox" name="" value="">
                </div>
            </div>
            <div class="orderInfo">
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">订单号：</span>
                    <span>170215014781185</span>
                </div>
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">商品总金额：</span>
                    <select class="" name="">
                        <option value="">222</option>
                    </select>
                </div>
            </div>
        </div>
        <h2 class="ws-editorder__tit">购买人信息</h2>
        <div class="ws-editorder__main">
            <div class="orderInfo">
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">会员用户名：</span>
                    <span>金山中学	</span>
                </div>
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">会员用户名：</span>
                    <span>金山中学	</span>
                </div>
            </div>
            <div class="orderInfo">
                <div class="orderInfo-row">

                </div>
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">会员用户名：</span>
                    <span>金山中学	</span>
                </div>
            </div>
        </div>
        <h2 class="ws-editorder__tit">收货人信息</h2>
        <div class="ws-editorder__main">
            <div class="orderInfo">
                <div class="orderInfo-row">
                    <span class="orderInfo-tit"><i style="color:red;">*</i>收货人姓名：</span>
                    <input type="text" name="" value="">
                </div>
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">会员用户名：</span>
                    <span>金山中学	</span>
                </div>
            </div>
            <div class="orderInfo">
                <div class="orderInfo-row">

                </div>
                <div class="orderInfo-row">
                    <span class="orderInfo-tit">会员用户名：</span>
                    <span>金山中学	</span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).on('click', '.ico-del', function() {
                $(this).closest('tr').remove();
            })

            $(document).on('click', '#addGoods', function() {
                var input = $('#addGoods_input').val();
                if(input == '') {
                    alert('商品货号不能为空！')
                } else {
                    var tpl = '<tr>\
                                    <td>'+input+'</td>\
                                    <td>\
                                        索尼 钮扣锂电池/手表电池3V CR2025\
                                    </td>\
                                    <td>\
                                        <input type="text" name="" value="">\
                                    </td>\
                                    <td>\
                                        <input type="text" name="" value="">\
                                    </td>\
                                    <td>\
                                        120.000\
                                    </td>\
                                    <td>\
                                        <span class="ico-del"></span>\
                                    </td>\
                                </tr>';

                    $('[data-role="tbody"]').append(tpl);
                }
            })
        })
    </script>
</body>

</html>
